<template>
  <div class="rank">
    <h1 class="title">官方榜</h1>
    <template v-if="official.length">
      <Official v-for="item of official" :officialInfo="item" :key="item"/>
    </template>
    <template v-if="Object.keys(singerTopList).length">
      <SingerTop :singerTop="singerTopList"/>
    </template>
    <h1 class="title">全球榜</h1>
    <ul class="global" v-if="global.length">
      <li class="globalItem" v-for="item of global" @click="selectPlayList(item.id)" :key="item">
        <Global :globalInfo="item"/>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getToplist } from '@/api/rank'
import { useRouter } from 'vue-router'
import Official from './components/Official.vue'
import SingerTop from './components/SingerTop.vue'
import Global from './components/Global.vue'

export default defineComponent({
  name: 'index',
  components: {
    Official,
    SingerTop,
    Global
  },
  setup () {
    const router = useRouter()
    const rankInfo = reactive({
      official: [],
      global: [],
      singerTopList: {}
    })
    const init = async () => {
      const { official, global, singerTop } = await getToplist()
      rankInfo.official = official
      rankInfo.global = global
      rankInfo.singerTopList = singerTop
    }
    const selectPlayList = (id) => {
      router.push({ name: 'playlistDetail', params: { id } })
    }
    onMounted(() => {
      init()
    })
    return {
      ...toRefs(rankInfo),
      selectPlayList
    }
  }
})
</script>

<style lang="scss" scoped>
.rank {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 60px 20px 0 0;
  overflow-y: scroll;
  overflow-x: hidden;

  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 10px;
  }

  .global {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .globalItem {
      flex: 0 0 18%;
      margin-bottom: 18px;
      margin-right: 15px;
      overflow: hidden;
    }
  }
}
</style>
